<template>
	<view class="container">
		<view class="header-top">就近加油</view>
		<view class="search-bar-wrapper">
			<view class="search-bar">
				<input type="text" placeholder="输入需要搜索的内容" class="search-input" />
				<img src="/static/whb/搜索@3x.png" alt="搜索图标" class="search-icon" />
			</view>
			<view class="map-mode-btn">地图模式</view>
		</view>
		<view class="gasoline-types">
			<view
				v-for="(type, index) in gasolineTypes"
				:key="index"
				:class="['gasoline-type', { selected: selectedType === index }]"
				@click="selectType(index)"
			>
				{{ type }}#
			</view>
		</view>
		<view class="gas-station-list">
			<view v-for="(station, index) in gasStations" :key="index" class="gas-station-item">
				<img :src="station.image" alt="加油站图片" class="gas-station-image" />
				<view class="gas-station-info">
					<view class="name-row">
						<view class="name" @click="goToStoreDetail(station)">{{ station.name }}</view>
						<view class="distance">{{ station.distance }}m</view>
					</view>
					<view class="discount">
						<view v-if="station.discount200" class="discount-tag">满200减20</view>
						<view v-if="station.discount500" class="discount-tag">满500减60</view>
					</view>
					<view class="business-hours">营业时间：{{ station.businessHours }}</view>
					<view class="price">￥{{ station.price }}/升</view>
					<view class="address">{{ station.address }}</view>
					<image src="/static/whb/plane@3x.png" class="tiaozhuan" @click="goToMap"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// 汽油标号数组
const gasolineTypes = ['90', '92', '93', '95', '97', '98'];
const selectedType = ref(1); // 默认选中92#

function selectType(index) {
	selectedType.value = index;
}

function goToMap() {
	uni.navigateTo({ url: '/pages/whb/05-map/05-map' });
}

// 跳转到门店详情页
function goToStoreDetail(station) {
	uni.navigateTo({
		url: '/pages/whb/05-store/05-store',
		success: () => {
			// 可以通过eventChannel向被打开页面传送数据
			uni.setStorageSync('selectedStation', station);
		}
	});
}

// 加油站数据模拟
const gasStations = [{
		image: '/static/whb/youhui1.jpg',
		name: '中国石油加油站',
		distance: 556,
		discount200: true,
		discount500: true,
		businessHours: '周一至周五',
		price: 5.66,
		address: '山阳区人民路与解放路交叉口'
	},
	{
		image: '/static/whb/youhui2.jpg',
		name: '中国石油加油站',
		distance: 880,
		discount200: true,
		discount500: true,
		businessHours: '周一至周五',
		price: 5.66,
		address: '山阳区人民路与解放路交叉口'
	}
];
</script>

<style>
	.container {
		height: 200px;
		background: #007aff;
		padding-bottom: 20px;
	}

	.header-top {
		text-align: center;
		color: white;
		padding-top: 10px;
		font-size: 20px;
		font-weight: 500;
		letter-spacing: 1px;
	}

	.search-bar-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 15px 0 15px;
	}

	.search-bar {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 20px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.06);
		flex: 1;
		height: 40px;
		padding: 0 10px;
		border: 1.5px solid #e6e6e6;
	}

	.search-input {
		flex: 1;
		height: 36px;
		border: none;
		outline: none;
		background: transparent;
		font-size: 15px;
	}

	.search-icon {
		width: 22px;
		height: 22px;
		margin-left: 5px;
	}

	.map-mode-btn {
		margin-left: 10px;
		background: #ff9800;
		color: #fff;
		border-radius: 16px;
		padding: 0 16px;
		height: 32px;
		display: flex;
		align-items: center;
		font-size: 15px;
		font-weight: 500;
		box-shadow: 0 2px 8px rgba(0,0,0,0.06);
	}

	.gasoline-types {
		display: flex;
		justify-content: space-between;
		margin: 18px 15px 0 15px;
	}

	.gasoline-type {
		background: #007aff;
		color: #fff;
		padding: 4px 18px;
		border-radius: 16px;
		font-size: 15px;
		font-weight: 400;
		margin-right: 6px;
		border: 1.5px solid #fff;
		transition: background 0.2s, color 0.2s;
	}

	.gasoline-type.selected {
		background: #0056c9;
		color: #fff;
		font-weight: 700;
		border: 1.5px solid #fff;
	}

	.gas-station-list {
		margin: 18px 15px 0 15px;
	}

	.gas-station-item {
		display: flex;
		background: #fff;
		border-radius: 14px;
		box-shadow: 0 2px 12px rgba(0,0,0,0.07);
		margin-bottom: 18px;
		padding: 12px 12px 12px 12px;
		position: relative;
	}

	.gas-station-image {
		width: 70px;
		height: 52px;
		margin-right: 12px;
		border-radius: 8px;
		object-fit: cover;
	}

	.gas-station-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.name-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.name {
		font-size: 16px;
		font-weight: bold;
		color: #222;
		cursor: pointer;
	}

	.distance {
		color: #007aff;
		font-size: 14px;
		font-weight: 500;
	}

	.discount {
		display: flex;
		gap: 8px;
		margin: 6px 0 2px 0;
	}

	.discount-tag {
		background: #ff9800;
		color: #fff;
		border-radius: 10px;
		font-size: 12px;
		padding: 2px 8px;
		margin-right: 4px;
	}

	.business-hours {
		color: #888;
		font-size: 13px;
		margin-bottom: 2px;
	}

	.price {
		color: #ff3b30;
		font-size: 16px;
		font-weight: 600;
		margin-bottom: 2px;
	}

	.address {
		color: #333;
		font-size: 13px;
		margin-bottom: 2px;
	}

	.tiaozhuan {
		width: 18px;
		height: 18px;
		position: absolute;
		right: 16px;
		bottom: 16px;
	}
</style>